<template>
    <div :class="wrapperClass" style="overflow: hidden" :style="styles">
        <ul class="content" style="position:relative;top:0;">
            <li v-for="(item, index) in list" :key="index">
                <slot :item="item"></slot>
            </li>
        </ul>
    </div>
</template>
<script>
  import BScroll from 'better-scroll'
  import {Loading} from 'element-ui'
  export default {
    name: '',
    props: {
      wrapperClass: {
        type: String,
        default: 'wrapper'
      },
      list: {
        type: Array,
        default: []
      },
      pageNo: {
        type: Number,
        default: 1
      },
      totalPage: {
        type: Number,
        default: 1
      },
      styles: {
        type: Object,
        default: function () {
          return {
            height: '100vh',
          };
        }
      }
    },
    data() {
      return {
        isPullUpLoad: false,
        loadingService: null
      }
    },
    computed: {},
    created () {
      console.log(this.pageNo, this.totalPage)
    },
    watch: {
      list() {
        setTimeout(() => {
          this.forceUpdate(true)
        }, 20)
      },
    },
    mounted(){
      let _self = this
      setTimeout(() => {
        _self.scroll = new BScroll('.' + this.wrapperClass, {
          scrollY: true,
          click: true,
          startY: 0,
          pullUpLoadMoreTxt: '',
          pullUpLoad: {
            threshold: 20
          }
        })
        _self.scroll.scrollTo(0,0)
        _self._initPullUpLoad()
      }, 20)
    },
    methods: {
      _initPullUpLoad() {
        let _self = this
        this.scroll.on('pullingUp', () => {
          if (_self.pageNo <= _self.totalPage) {
            this.isPullUpLoad = true
            this.loadingService = Loading.service({});
            this.$emit('loadMore')
          }
        })
      },
      forceUpdate() {
        if (this.isPullUpLoad) {
          this.isPullUpLoad = false
          this.scroll.finishPullUp()
          this.loadingService && this.loadingService.close();
          this.scroll && this.scroll.refresh()
        }
      },
    },
    components: {}
  }
</script>

<style lang="less" scoped>


</style>